<template>
  <div class="table-wrap">
    <div class="form-header">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="">
          <el-input
            v-model="formInline.user"
            placeholder="输入名称/编号/其他搜索"
            clearable
          />
        </el-form-item>
        <el-form-item label="">
          <el-input
            v-model="formInline.region"
            placeholder="输入材料商名称搜索"
            clearable
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button type="primary" @click="handleAdd">新增匹配</el-button>
          <el-button type="warning">批量删除</el-button>
        </el-form-item>
      </el-form>
      <div class="operate-btn-wrap">
        <el-button type="primary">类别筛选</el-button>
        <el-button type="primary">批量导入</el-button>
        <el-button type="primary">导出Excel</el-button>
      </div>
    </div>
    <el-table
      ref="multipleTableRef"
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column type="index" label="序号" width="55">
        <template #default="scope">
          {{ getIndex(scope.$index) }}
        </template>
      </el-table-column>

      <el-table-column
        v-for="item in tableHeader"
        :key="item"
        :prop="item.prop"
        :label="item.name"
      >
        <template
          v-if="item.prop == 'fm' || item.prop == 'su'"
          #default="scope"
        >
          <img
            :src="scope.row[item.prop]"
            style="width: 80px; height: 60px"
            alt=""
          />
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="200">
        <template #default="scope">
          <el-button @click="copyRow(scope.row)" link type="primary"
            >复制</el-button
          >
          <el-button @click="handleEdit(scope.row)" link type="primary"
            >编辑</el-button
          >
          <el-button @click="handleDelete(scope.row)" link type="primary"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      v-model="dialogVisible"
      :title="dialogTitle"
      width="30%"
      align-center
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="120px"
        class="demo-ruleForm"
        status-icon
      >
        <el-form-item
          v-for="item in tableHeader"
          :key="item"
          :label="item.name"
          :prop="item.prop"
        >
          <el-select
            v-if="item.type == 'select'"
            :multiple="item.multi ? true : false"
            v-model="ruleForm[item.prop]"
            placeholder=""
          >
            <el-option label="住宅" value="0" />
            <el-option label="公寓" value="1" />
          </el-select>
          <el-input
            v-if="item.type == 'input'"
            placeholder="请输入"
            v-model="ruleForm[item.prop]"
          ></el-input>
          <el-upload
            v-if="item.type == 'uploadImg'"
            v-model:file-list="fileList"
            class="upload-demo"
            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            list-type="picture"
          >
            <el-button type="primary">上传图片</el-button>
          </el-upload>
          <NumberRange
            :value="ruleForm[item.prop]"
            v-if="item.type == 'numberRange'"
          ></NumberRange>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmForm"> 确认 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, reactive } from "vue";
import NumberRange from "@/components/InputNumberRange";
import { ElMessage, ElMessageBox } from "element-plus";
const formInline = reactive({
  user: "",
  region: "",
  date: "",
});

const multipleTableRef = ref();
const multipleSelection = ref([]);
const toggleSelection = (rows) => {
  if (rows) {
    rows.forEach((row) => {
      multipleTableRef.value.toggleRowSelection(row);
    });
  } else {
    multipleTableRef.value.clearSelection();
  }
};
const handleSelectionChange = (val) => {
  multipleSelection.value = val;
};
const currentPage = ref(1);
const pageSize = ref(10);
const tableHeader = [
  { prop: "jzdl", name: "建筑大类", type: "select" },
  { prop: "gjfl", name: "公建分类", type: "select", multi: true },
  { prop: "color", name: "颜色", type: "select", multi: true },
  { prop: "dc", name: "档次", type: "select", multi: true },
  { prop: "cldl", name: "材料大类", type: "select" },
  { prop: "yjcl", name: "一级材料", type: "select", multi: true },
  { prop: "ejcl", name: "二级材料", type: "select", multi: true },
  { prop: "sjcl", name: "三级材料", type: "input", multi: true },
];
const getIndex = (index) => {
  return (currentPage.value - 1) * pageSize.value + index + 1;
};
const dialogTitle = ref("添加匹配");
const dialogType = ref("add");
const dialogVisible = ref(false);
const handleEdit = (item) => {
  console.log("item", item);
  dialogTitle.value = "编辑匹配";
  dialogType.value = "edit";
  dialogVisible.value = true;
};
const handleDelete = (item) => {
  ElMessageBox.confirm("确认删除此匹配信息?", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      ElMessage({
        type: "success",
        message: "删除成功",
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除",
      });
    });
};
const copyRow = (item) => {
  ElMessage({
    type: "success",
    message: "复制成功",
  });
  setTimeout(() => {
    dialogTitle.value = "添加匹配";
    dialogType.value = "add";
    dialogVisible.value = true;
  }, 1000);
};
const handleAdd = () => {
  dialogTitle.value = "添加匹配";
  dialogType.value = "add";
  dialogVisible.value = true;
};
const tableData = [
  {
    jzdl: "建筑大类",
    gjfl: "公建分类",
    color: "青色",
    dc: "档次",
    cldl: "住宅",
    yjcl: "住宅一级",
    ejcl: "住宅二级",
    sjcl: "住宅三级",
  },
  {
    jzdl: "建筑大类",
    gjfl: "公建分类",
    color: "青色",
    dc: "档次",
    cldl: "住宅",
    yjcl: "住宅一级",
    ejcl: "住宅二级",
    sjcl: "住宅三级",
  },
  {
    jzdl: "建筑大类",
    gjfl: "公建分类",
    color: "青色",
    dc: "档次",
    cldl: "住宅",
    yjcl: "住宅一级",
    ejcl: "住宅二级",
    sjcl: "住宅三级",
  },
  {
    jzdl: "建筑大类",
    gjfl: "公建分类",
    color: "青色",
    dc: "档次",
    cldl: "住宅",
    yjcl: "住宅一级",
    ejcl: "住宅二级",
    sjcl: "住宅三级",
  },
  {
    jzdl: "建筑大类",
    gjfl: "公建分类",
    color: "青色",
    dc: "档次",
    cldl: "住宅",
    yjcl: "住宅一级",
    ejcl: "住宅二级",
    sjcl: "住宅三级",
  },
  {
    jzdl: "建筑大类",
    gjfl: "公建分类",
    color: "青色",
    dc: "档次",
    cldl: "住宅",
    yjcl: "住宅一级",
    ejcl: "住宅二级",
    sjcl: "住宅三级",
  },
];
const onSubmit = () => {};
const ruleFormRef = ref();
const ruleForm = reactive({
  cldl: "0",
  yjcl: ["0"],
  ejcl: ["0"],
  sjcl: "",
  fm: "",
  tjxs: "",
  al: "",
  jgqj: [10, 100],
  gy: "ce",
  dc: ["0"],
  su: "",
  jzll: ["0"],
  jzll: ["0"],
  color: ["0"],
});
const rules = reactive({
  name: [
    { required: true, message: "Please input Activity name", trigger: "blur" },
    { min: 3, max: 5, message: "Length should be 3 to 5", trigger: "blur" },
  ],
  region: [
    {
      required: true,
      message: "Please select Activity zone",
      trigger: "change",
    },
  ],
  count: [
    {
      required: true,
      message: "Please select Activity count",
      trigger: "change",
    },
  ],
  date1: [
    {
      type: "date",
      required: true,
      message: "Please pick a date",
      trigger: "change",
    },
  ],
  date2: [
    {
      type: "date",
      required: true,
      message: "Please pick a time",
      trigger: "change",
    },
  ],
  type: [
    {
      type: "array",
      required: true,
      message: "Please select at least one activity type",
      trigger: "change",
    },
  ],
  resource: [
    {
      required: true,
      message: "Please select activity resource",
      trigger: "change",
    },
  ],
  desc: [
    { required: true, message: "Please input activity form", trigger: "blur" },
  ],
});
const confirmForm = () => {};
</script>
<style lang="scss" scoped>
.table-wrap {
  padding: 20px;
  .form-header {
    display: flex;
    justify-content: space-between;
  }
}
.demo-ruleForm {
  width: 100%;
  .el-select {
    width: 100%;
  }
}
</style>
